<template>
  <view class="doctor-card">
    <image :src="doctor.avatar" mode="aspectFill" class="doctor-avatar" />
    <view class="doctor-info">
      <view class="doctor-header">
        <text class="doctor-name">{{ doctor.name }}</text>
        <text class="doctor-title">{{ doctor.title }}</text>
      </view>
      <text class="doctor-dept">{{ doctor.department }}</text>
      <text class="doctor-specialty">{{ doctor.specialty }}</text>
      <view class="doctor-rating">
        <uni-rate :value="doctor.rating" size="12" readonly />
        <text class="consult-count">已接诊 {{ doctor.consult_count }} 人</text>
      </view>
    </view>
    <button class="consult-btn" @click="handleConsult">立即咨询</button>
  </view>
</template>

<script lang="ts" setup>
interface Doctor {
  id: number;
  name: string;
  title: string;
  department: string;
  specialty: string;
  rating: number;
  consult_count: number;
  avatar: string;
}

const props = defineProps<{
  doctor: Doctor;
}>();

const emit = defineEmits(['consult']);

const handleConsult = () => {
  emit('consult', props.doctor);
};
</script>

<style>
.doctor-card {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.doctor-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 20rpx;
}

.doctor-info {
  flex: 1;
}

.doctor-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 8rpx;
}

.doctor-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.doctor-title {
  font-size: 24rpx;
  color: #666666;
  background-color: #F5F8FF;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

.doctor-dept {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 4rpx;
}

.doctor-specialty {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 8rpx;
}

.doctor-rating {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.consult-count {
  font-size: 24rpx;
  color: #999999;
}

.consult-btn {
  font-size: 24rpx;
  padding: 8rpx 24rpx;
  background-color: #4A90E2;
  color: #FFFFFF;
  border-radius: 100rpx;
  border: none;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52rpx;
  box-shadow: 0 2rpx 8rpx rgba(74, 144, 226, 0.2);
  transition: all 0.3s ease;
  margin-top: 10rpx;
}

.consult-btn:active {
  transform: scale(0.95);
  background-color: #3A80D2;
}
</style> 